<template>
  <div class="selector-input">
    <label class="placeholder">{{ placeholder }}</label>
    <input  class="input" type="text" v-model="inputValue" @input="handleInput" />
    <span class="iconfont icon-arrow-down"></span>
  </div>
</template>
<script setup>
const props = defineProps({
  placeholder: {
    type: String,
    default: '请选择'
  }
})
</script>
<style lang="scss" scoped>
.selector-input{
  position: relative;
  width: 100%;
  height: 38px;
  .input{
    width: 100%;
    height: 100%;
    padding: 0 15px;
    box-sizing: border-box;
    border: 1px solid #999;
    border-radius: 5px;
    outline: none;
    background: transparent;
    font-size: 14px;
    color: #333;
    transition:all .2s linear;
    &:focus{
      border-color: #1890ff;
      box-shadow: 0 0 3px #1890ff;
    }
  }
  .placeholder,
  .iconfont{
    position: absolute;
  }
  .placeholder{
    left: 15px;
    top: 8px;
    color: #999;
  }
  .iconfont{
    right: 15px;
    top:12px;
    color: #999;
    &.icon-search{
      font-size: 22px;
      top:8px;
    }
  }
}

</style>